<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
        window.scratchJrPage = 'inappPaintEditorGuide';
    </script>
    <script type="text/javascript" src="../app.bundle.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="content-buffer">
      </div>
      <div id="ipad-project-view-wrapper">
        <div class="learn-tab learn-tab-selected learn-paint">
          <!-- 1. Undo -->
          <div class="paint-button paint-button-selected" id="paint-button-undo">
            <div class="paint-button-text">1</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-undo"></div>
          <div class="paint-dot" id="paint-dot-undo"></div>
          <!-- 2. Redo -->
          <div class="paint-button" id="paint-button-redo">
            <div class="paint-button-text">2</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-redo"></div>
          <div class="paint-dot" id="paint-dot-redo"></div>
          <!-- 3. Select Shape -->
          <div class="paint-button" id="paint-button-select-shape">
            <div class="paint-button-text">3</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-shape-1"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-1"></div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-shape-2"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-2"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-3"></div>
          <!-- 4. Character Name -->
          <div class="paint-button" id="paint-button-character-name">
            <div class="paint-button-text">4</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-character-name"></div>
          <div class="paint-dot" id="paint-dot-character-name"></div>
          <!-- 5. Cut -->
          <div class="paint-button" id="paint-button-cut">
            <div class="paint-button-text">5</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-cut"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-cut"></div>
          <div class="paint-dot" id="paint-dot-cut"></div>
          <img class="ipad-project-view" src="images/paint.png" />
          <!-- 6. Duplicate -->
          <div class="paint-button" id="paint-button-duplicate">
            <div class="paint-button-text">6</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-duplicate"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-duplicate"></div>
          <div class="paint-dot" id="paint-dot-duplicate"></div>
          <!-- 7. Rotate -->
          <div class="paint-button" id="paint-button-rotate">
            <div class="paint-button-text">7</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-rotate"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-rotate"></div>
          <div class="paint-dot" id="paint-dot-rotate"></div>
          <!-- 8. Drag -->
          <div class="paint-button" id="paint-button-drag">
            <div class="paint-button-text">8</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-drag"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-drag"></div>
          <div class="paint-dot" id="paint-dot-drag"></div>
          <!-- 9. Save -->
          <div class="paint-button" id="paint-button-save">
            <div class="paint-button-text">9</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-save"></div>
          <div class="paint-dot" id="paint-dot-save"></div>
          <!-- 10. Fill -->
          <div class="paint-button" id="paint-button-fill">
            <div class="paint-button-text">10</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-fill"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-fill"></div>
          <div class="paint-dot" id="paint-dot-fill"></div>
          <!-- 11. Camera -->
          <div class="paint-button" id="paint-button-camera">
            <div class="paint-button-text">11</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-camera"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-camera"></div>
          <div class="paint-dot" id="paint-dot-camera"></div>
          <!-- 12. Select Color -->
          <div class="paint-button" id="paint-button-select-color">
            <div class="paint-button-text">12</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-color-1"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-color-1"></div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-color-2"></div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-color-3"></div>
          <!-- 13. Select Line Size -->
          <div class="paint-button" id="paint-button-select-line-size">
            <div class="paint-button-text">13</div>
          </div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-line-size-1"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-1"></div>
          <div class="paint-vertical-line" id="paint-vertical-line-select-line-size-2"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-2"></div>
          <div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-3"></div>
          <div id="paint-key">
            <div id="paint-key-header">
            </div>
            <div id="paint-key-description">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
